<template>

  <div>
    <div>电光源</div>
    <div ref="chart" style="width: 1000px; height:800px;"></div>
  </div>
</template>

<script setup>
import { defineEmits, onMounted, ref } from "vue";
import * as echarts from "echarts";
const chart = ref(null);
var list = ref([
  [32, 20, 22, 14, 13, 26, "02"],
  [18, "03", 16, 17, 22, "09", 16],
  [15, "06", 23, 21, 16, "02", 11],
  [30, "05", 11, 21, 13, 16, 10],
  [11, "02", 32, 22, "04", 27, 10],
  ["01", "03", 22, 30, 16, 23, "03"],
  [17, 30, 20, "02", 11, "09", 11],
  [21, 13, "04", 22, "06", 25, "06"],
  [15, "01", "07", 24, "02", 29, 12],
  ["07", 22, 26, "08", "04", 17, 15],
  [23, 22, 20, 29, 16, 15, 14],
  [21, "02", 28, "07", 27, 11, "02"],
  [19, "04", 10, 27, "09", 26, "03"],
  [11, 18, "05", 17, 30, 31, 13],
  [20, "04", 18, 13, "02", 16, 16],
  ["01", 33, 27, 15, 30, 11, "01"],
  [25, 27, 33, "01", 28, "04", "03"],
  [32, "04", 11, "05", 20, 15, "13"],

  ["01", 12, "08", 19, 17, 24, "16"],

  [32, 24, "09", 19, 10, 13, "01"],
  [13, "01", 18, 26, "08", 20, "16"],
  [27, "02", "05", 32, 20, 13, 10],
  [33, 23, 18, 14, 24, 26, 10],
  [18, "04", 30, "01", 13, 26, "03"],

  [30, 17, 25, 14, "02", 15, 11],
  [22, 15, 26, 33, "02", 30, "04"],
  ["07", "09", 16, 17, "05", 29, 15],
  [33, "01", 27, 10, "07", 13, "03"],
]);
const listone = [];

list.value.map((x) => {
  x.pop();
  x = x
    .map((x) => {
      return Number(x) + 10;
    })
    .sort((a, b) => a - b);

  listone.push([
    // x.slice(0, 3).join("") - 111213,
    // x.slice(3, 6).join("") - 141516,
    x.slice(0, 3).join(""),
    x.slice(3, 6).join(""),
  ]);

  return x;
});
const emit = defineEmits(["calllsit"]);
emit("calllsit", listone);
console.log("dasdasd", list, listone);
onMounted(() => {
  const myChart = echarts.init(chart.value);
  const option = {
    // ECharts 配置项
    title: {
      text: "ECharts 示例",
    },

    xAxis: [{ gridIndex: 0, min: 111213, max: 283940 }],
    yAxis: [{ gridIndex: 0, min: 131415, max: 415263 }],
    tooltip: {
      formatter: "数字 {a}: ({c})",
    },

    series: [
      {
        symbolSize: 20,
        data: listone,
        type: "scatter",
      },
    ],
  };

  myChart.setOption(option);
});
</script>